<template>
    <div class="container">
        <!-- 跳转icon -->
        <img src="@/assets/images/icon/消息.svg" alt="" class="news">
        <img src="@/assets/images/icon/返回.svg" alt="" class="back" @click="router.back()">

        <!-- 个人信息 -->
        <div class="personInfo">
            <!-- 简介区 -->
            <div class="profile">
                <!-- 头像 -->
                <img :src="merchantInfo.headPicSrc" alt="" class="headPic">
                <!-- 昵称 -->
                <div class="nickname">
                    <p>
                        {{merchantInfo.nickname}}
                    </p>

                </div>
                <!-- 关注按钮 -->
                <button class="follow">+</button>
            </div>

            <!-- 社交信息：关注、粉丝、动态-->
            <div class="socialInfo">
                <!-- 关注 -->
                <div class="idol">
                    <p class="value">39</p>
                    <p class="title">关注</p>
                </div>
                <!-- 粉丝 -->
                <div class="idol">
                    <p class="value">541</p>
                    <p class="title">粉丝</p>
                </div>
                <!-- 动态 -->
                <div class="idol">
                    <p class="value">12</p>
                    <p class="title">动态</p>
                </div>
                
            </div>
            
        </div>

        <!-- 其他信息 -->
        <div class="otherInfo">
            <!-- 切换 -->
            <div class="switch">
                <span :class="{active:isActive}" @click="switchActive">他的小店（{{merchantInfo.shop?merchantInfo.shop.length:0}}）</span>
                <span :class="{active:!isActive}" @click="switchActive">他的拼租（{{merchantInfo.shareRent?merchantInfo.shareRent.length:0}}）</span>
            </div>

            <!-- 商品展示 -->
            <ul class="goodsShow">
                <li 
                    v-if="isActive"
                    v-for="good in merchantInfo.shop" 
                    @click="router.push({
                        name:'goodsDetail',
                        params:{
                            userId:good.merchantId,
                            goodsId:good.goodsId
                        }
                    })"
                >
                    <GoodsCard
                        :coverImages="good.goodsImages"
                        :priceDay="good.priceDay"
                        :priceMonth="good.priceMonth"
                        :title="good.goodsName" >
                    </GoodsCard>
                </li>

                <li 
                    v-for="good in merchantInfo.shareRent" 
                    v-if="!isActive"
                    @click="router.push({
                        name:'goodsDetail',
                        params:{
                            userId:good.merchantId,
                            goodsId:good.goodsId
                        }
                    })">
                    <GoodsCard
                        :coverImages="good.goodsImages"
                        :priceDay="good.priceDay"
                        :priceMonth="good.priceMonth"
                        :title="good.goodsName" >
                    </GoodsCard>
                </li>



            </ul>

            
            
        </div>
        

        <!-- 底部导航 -->
        <CommonNav></CommonNav>

    </div>

    
    
</template>
    
<script setup>
    import CommonNav from '@/components/CommonNav.vue'
    import { useRouter,useRoute} from 'vue-router';
    import {useStore} from 'vuex'
    import { ref,reactive } from 'vue';
    import GoodsCard from '@/components/goods/SingleGoodsCard.vue';
    //api
    import {GoodsRequester,UserRequester} from '@/api/api.js'
    const UserRqster = new UserRequester();
    const GoodsRqster = new GoodsRequester();
    const store = useStore();
    const router = useRouter();
    const route =  useRoute();

    let isActive = ref(true);
    function switchActive(){
        isActive.value=!isActive.value;
        //更换展示的商品
    }

    //商家信息
    var merchantInfo = reactive({
        headPicSrc:'',
        nickname:'',
        credit:50,  //信誉分
        shop:[      //小店

        ] ,     
        shareRent:[ //拼租
            
        ]    
        
    });


    UserRqster.reqPrivateShop(route.params.userId).then(res=>{
        console.log('Shop is ',res);
        merchantInfo.shop = res.data;
    })
    
    UserRqster.reqPrivateShare(route.params.userId).then(res=>{
        console.log('Share is ',res);
        merchantInfo.shareRent = res.data;
    })





    
    //在setup中获取卖家详细信息
    GoodsRqster.reqMerchantDetial(route.params.userId).then(res=>{
        console.log('卖家详细信息:',res.data);
        merchantInfo.headPicSrc = res.data.image;
        merchantInfo.nickname = res.data.nickname;
        merchantInfo.credit = res.data.credit;
    })
    


    
    
    
</script>
    


<style lang="scss" scoped>
    .container{
    transition: none;
    width: 4.29rem;
    height: 100%;
    background-color: #6FA11E;
    /* background-color: #759eaf; */
    position: relative;

    /* icon图片 */

    >img{
        width: 0.28rem;
        height: 0.28rem;
        z-index: 2;
    }
    img.news{
        position: absolute;
        top:0.6rem;
        right: 0.38rem;
        
        /*  background-color: rgba(157, 199, 100, 1); */
    }

    img.back{
        position: absolute;
        top:0.6rem;
        left: 0.38rem;
    }
    
    
    /* 个人信息区 */
    .personInfo{
        background-color: #6FA11E;
        position: relative;
        width: 4.28rem;
        height: 3.02rem;
        /* 简介 */
        .profile{
            text-align: center;
            height: 1.86rem;
            /* background-color: orange; */
            /* 头像 */
            img.headPic{
                position: absolute;
                left: 1.72rem;
                top: 0.65rem;
                width: 0.84rem;
                height: 0.84rem;
                border-radius: 0.90rem 0.90rem 0.90rem 0.90rem; 
            }
            /* 昵称 */
            .nickname{
                position: absolute;
                top: 1.66rem;
                width: 100%;
                height: 0.28rem;
               /*  background-color: pink; */
                text-align: center;

                p{
                    position: relative;
                    display: block;
                    font-size: 0.20rem;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: bold;
                    text-align: CENTER;
                    color: #ffffff;
                    line-height: 0.20rem;
                    display: inline;
                    } 

                }
                
                
                /* 关注按钮  */
                .follow{
                        width: 0.4rem;
                        height: 0.2rem;
                        position: absolute;
                        top:1.35rem;
                        right:1.28rem ;
                        border-radius: 0.10rem;
                        font-size: 0.14rem;
                        background: #f0bf2d;
                        color:white;
                        border: none;
                    
                        }
                
        

        }
        /* 社交信息 */
        .socialInfo{
            margin-top:0.1rem;
            display: flex;
            justify-content: center;
            >div{
                
                width: 1rem;
                white-space: nowrap;
                text-align: center;
                p{
                    font-size: 0.14rem;
                    color: #ffffff;
                }
                p.title{
                    opacity: 0.8;
                }
            }

        }      
    }

    /* 其他信息 */
    .otherInfo{
        position: absolute;
        top:2.51rem;
        z-index: 3;
        height: 6.75rem;
        width: 4.28rem;
        background: #f2f2f2;
        border-radius: 0.50rem 0.50rem 0rem 0rem;
        overflow: scroll;
        
        /* 导航 */
        .switch{
            position: sticky;
            top:0rem;
            z-index: 999;
            background-color: #f2f2f2;
            border-radius: 0.50rem 0.50rem 0rem 0rem;
            width: 4.28rem;
            display: flex;
            justify-content: space-around;
            height: 0.74rem;
            /* background-color: pink; */
            align-items:flex-end;
            span{
                height: 0.2rem;
                line-height: 0.20rem;
                font-size: 0.20rem;
                font-weight: bold;
                color: #7F7F7F;
                margin-bottom: 0.2rem;
            }

            span.active{
                color:#F0BF2D;
            }
        }


        .goodsShow{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom: 0.75rem;

            >li{
                margin-top:0.4rem;
            }

            /* 奇数选择器 */
            li:nth-child(odd){
                margin-right:0.4rem ;
                margin-left: 0.22rem;
            }
        }

        
    }
    



}
</style>